<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 搜索条件 -->
    <div class="header-search single_line">
      <el-form ref="search_form" :model="search" :inline="true" label-width="0">
        <div class="form-area">
          <div class="search_view">
            <el-form-item>
              <el-input v-model="search.hxy_scl_name" placeholder="请选择学校" readonly @focus="schoolVisible = true" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="search.keyword" placeholder="请输入卡号/姓名" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="search.status_flag" placeholder="请选择卡状态">
                <el-option label="正常" value="1"></el-option>
                <el-option label="挂失" value="2"></el-option>
                <el-option label="未启用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <div class="btn-area">
              <span class="spp-btn spp-btn-primary" @click="getTeaCardPaginateData()">搜索</span>
              <span class="spp-btn" @click="resetData()">重置</span>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content_view tea_card_content">
      <!-- 操作按鈕 -->
      <div class="main-header">
        <el-row :gutter="20">
          <el-col :span="4" class="left">教师卡列表</el-col>
          <el-col :span="20" class="right">
            <el-form :inline="true" label-width="0">
              <el-form-item>
                <el-select v-model="batch_card_type_flag" @change="setBatchTeaCardTypeFlay()" placeholder="批量设置卡类型">
                  <el-option v-for="(value, key, index) in card_type_flag_dic" :key="index" :label="value" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <el-table ref="table" :data="tea_card_paginate_data" :height="height-130" size="mini" stripe>
        <el-table-column label="序号" type="index" width="60" />
         <el-table-column label="姓名" prop="tea_name" min-width="100" align="left" />
        <el-table-column label="卡号" prop="tea_no" min-width="150" align="left" />
        <el-table-column label="手机号" prop="tea_phone" min-width="150" align="left" />
        <el-table-column label="卡类型" prop="card_type_name" min-width="120" align="left" />
        <el-table-column label="sn" min-width="150" align="left">
          <template slot-scope="scope">
            <el-input v-model="scope.row.card_sn" @change="teaCardDindSubmit(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="设置卡类型" min-width="150" align="left">
          <template slot-scope="scope">
            <el-select v-model="scope.row.card_type_flag" @change="teaCardDindSubmit(scope.row)">
              <el-option v-for="(value, key, index) in card_type_flag_dic" :key="index" :label="value" :value="key"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right" align="left">
          <template slot-scope="scope">
            <el-button v-if="auth.unbind != -1" type="text" @click="teaCardUnbind(scope.row.tea_card_id)">挂失</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="page_size" @pagination="getTeaCardPaginateData" />
    </div>
    <!-- 选择学校 -->
    <el-dialog title="选择学校" :visible.sync="schoolVisible" :close-on-click-modal="false" width="720px" class="school_view">
      <el-scrollbar wrap-class="vertical_scrollbar" :style="{height: height + 'px'}">
        <SelectSchool @selectSchool="selectSchool" />
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
<script>
import { paginate, bind, unbind } from '@/api/pajx/pajx/teacher_card'
import { stay_flag, card_type } from '@/api/public'
import { mapState } from 'vuex'
import SelectSchool from '@/components/SelectSchool'
import Pagination from '@/components/Pagination'
export default {
  name: 'PajxTeacherCard',
  components: { SelectSchool, Pagination },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      stay_flag_dic: [],
      card_type_flag_dic: [],
      search: {
        hxy_scl_id: '',
        hxy_scl_name: '',
        status_flag: '',
        keyword: ''
      },
      schoolVisible: false,
      page: 1,
      page_size: 20,
      total: 0,
      tea_card_paginate_data: [],
      batch_card_type_flag: ''
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: { },
  methods: {
    // 获取按钮权限
    permissionAuth() {
      this.auth.unbind = this.permission.indexOf('/api/pajx/tea/card/unbind')
    },
    // 重置搜索选项
    resetData() {
      Object.assign(this.$data.search, this.$options.data().search)
      this.search.hxy_scl_id = ''
      this.search.hxy_scl_name = ''
    },
    // 选择学校
    selectSchool(data) {
      this.schoolVisible = false
      this.search.hxy_scl_id = data.hxy_scl_id
      this.search.hxy_scl_name = data.scl_name
      this.getTeaCardPaginateData()
    },
    // 获取字典列表
    getDicData() {
      stay_flag().then(response => {
        this.stay_flag_dic = response.data
      })
      card_type().then(response => {
        this.card_type_flag_dic = response.data
      })
    },
    // 获取卡列表
    getTeaCardPaginateData() {
      if(!this.search.hxy_scl_id){
        this.$message({
          message: '请选选择学校',
          type: 'warning'
        })
        return
      }
      paginate(this.search, this.page, this.page_size).then(response => {
        this.tea_card_paginate_data = response.data.list
        this.total = response.data.totalRow
      })
    },
    // 绑定教师卡
    teaCardDindSubmit(data){
      if(!data.card_type_flag){
        this.$message({
          message: '请设置卡类型',
          type: 'warning'
        });
        return
      }
      if(!data.card_sn){
        this.$message({
          message: '请输入卡sn',
          type: 'warning'
        });
        return
      }
      bind(data).then(response => { })
    },
    // 批量设置卡类型
    setBatchTeaCardTypeFlay() {
      var that = this
      this.tea_card_paginate_data.forEach(function( val, index ) {
        val.card_type_flag = that.batch_card_type_flag
      })
    },
    // 挂失
    teaCardUnbind(tea_card_id) {
      this.$confirm('确认要挂失该教师卡吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        unbind(tea_card_id).then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getTeaCardPaginateData()
        })
      }).catch(() => {})
    }
  },
  created() {
    this.permissionAuth()
    this.getDicData()
  }
}
</script>
<style lang="scss">
.tea_card_content{
  .el-input--medium .el-input__inner{
    height: 26px;
    line-height: 26px;
  }
  .el-input--medium .el-input__icon{
    line-height: 26px;
  }
  .main-header{
    .el-input--medium .el-input__icon{
      line-height: 36px;
    }
  }
}
</style>
